<!--
 * @Author: chenli 604089679@qq.com
 * @Date: 2023-07-24 11:11:04
 * @LastEditors: chenli 604089679@qq.com
 * @LastEditTime: 2023-07-24 17:14:38
 * @FilePath: \vue3\src\views\tripartitelibrary\swiper\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <Swiper
      :modules="modules"
      :loop="true"
      :speed="8000"
      :space-between="0"
      :centered-slides="true"
      :autoplay="autoOptions"
      style="background-color: rgba(245, 211, 199, 0.3)"
    >
      <swiper-slide v-for="item in list">
        <div style="width:800px;text-align: center;">{{ item.name }}</div></swiper-slide>
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/autoplay";
const modules = [Autoplay];
const autoOptions = {
  delay: 0,
  stopOnLastSlide: false,
  disableOnInteraction: false,
};
let list = [
  {
    name: "text1",
  },
  {
    name: "text2",
  },
  {
    name: "text3",
  },
  {
    name: "一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十",
  },
  {
    name: "4444",
  },
  {
    name: "5555",
  },
];
</script>

<style scoped lang="scss">
:deep(.swiper-wrapper) {
  -webkit-transition-timing-function: linear !important; /*之前是ease-out*/
  -moz-transition-timing-function: linear !important;
  -ms-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
:deep(.swiper-slide .swiper-slide-active){
  text-align: center;
  margin-left: 50px;
}
</style>
